<template>
  <div class="dservice">
    <Navbar :title="'代寄服务'"></Navbar>
    <div class="content">
      <div class="header">
        <span class="span">请选择代寄类型</span>
        <span style="color: rgb(17, 127, 253)" @click="clickOrder()">申请记录</span>
      </div>
      <div class="item" @click="clickAdd()">
        <div class="left">
          <img src="@/assets/tabs/copy.png" alt="" />
        </div>
        <div class="right">
            <span class="title">住院病案复印</span>
            <span class="subtitle">住院病历资料复印</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "./component/Navbar.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const clickAdd=()=>{
    router.push("/addCopy")
}

const clickOrder=()=>{
    router.push("/order")
}
</script>

<style scoped lang="scss">
.dservice {
  width: 100vw;
  height: 100vh;
  padding: 0px 15px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: rgb(242, 242, 239);
  .content {
    margin-top: 46px;
    height: calc(100vh - 46px);
    .header {
      padding: 20px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 20px;
      box-sizing: border-box;
      .span {
        border-left: 5px solid rgb(0, 119, 255);
        padding: 0px 10px;
      }
      box-sizing: border-box;
    }
    .item {
        padding: 15px 15px;
        display: flex;
        justify-content: start;
        align-items: center;
        background-color: white;
        border-radius: 10px;
        .left{
            margin-right: 20px;
        }
        .right{
            display: flex;
            flex-direction: column;
            line-height: 30px;
        }
    }
  }
}
</style>